<template>
  <div class="near-cont">
    <h3 class="font-bold">附近商家</h3>
    <div class="nearby">
      <ul>
        <li v-for="item in nearList" :key="item.id">
          <a href="https://www.meituan.com/meishi/1146563/"
            ><div class="pic">
              <div class="imgbox" style="height: 100%; width: 100%">
                <img :src="item.headIcon" />
              </div>
            </div>
            <p class="name truncate">{{ item.name }}</p>
            <p class="source">
              <span>{{ item.score }}分</span><span>{{ item.sold }}人消费</span>
            </p>
            <p
              class="source desc"
              :style="item.park ? 'dispaly:none' : 'display:block'"
            >
              {{ item.park }}
            </p>
            <p class="price"><b>￥</b>{{ item.avgPrice }}<b>起</b></p></a
          >
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { defineComponent, onMounted, ref } from "vue";
import { aroundApi } from "@/api/details";
export default defineComponent({
  name: "NearShop",
});
</script>

<script setup>
const nearList = ref([]);
onMounted(async () => {
  const res = await aroundApi();
  // console.log(res)
  res.map((item) => {
    const arr = item.headIcon.split("w.h/");
    item.headIcon = arr[0] + arr[1];
  });
  nearList.value = res;
});
</script>
<style lang="less" scoped>
/* 附近商家 */
.near-cont {
  p {
    margin: 0;
  }
  h3 {
    font-size: 20px;
    line-height: 26px;
    color: #333;
  }
  .nearby {
    margin-top: 8px;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    padding: 20px 20px 0;
    overflow: hidden;
    color: #999;
    ul {
      width: 1200px;
      li {
        height: 241px;
        overflow: hidden;
        float: left;
        width: 214px;
        margin: 0 20px 22px 0;
        .price {
          font-size: 22px;
          line-height: 27px;
          color: #f60;
          b {
            font-weight: 400;
            font-size: 14px;
          }
        }
        .desc {
          margin: 1px 0 3px;
          min-height: 33px;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
        }
        .source {
          color: #999;
          font-size: 12px;
          //height: 17px;
          line-height: 17px;
          span {
            margin-right: 4px;
          }
        }
        .pic {
          height: 120px;
          border-radius: 4px;
          .imgbox {
            display: block;
            width: auto;
            height: auto;
            // background: url(/bs/file/?f=meis/meishi.web:assets/bee61f5f04046d07.png@9f5cb6a)
            // 	center center no-repeat #e0e0e0;bee61f5f04046d0
            background-size: 60% auto;
            img {
              display: block;
              width: 100%;
              height: 100%;
              border-radius: 4px;
            }
          }
        }
        .name {
          font-size: 16px;
          line-height: 22px;
          color: #222;
          margin: 10px 0 6px;
        }
        .truncate {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        a {
          text-decoration: none;
          cursor: pointer;
          color: #222;
        }
      }
    }
  }
}
/* 附近商家 */
</style>
